<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="mescroll-master/dist/mescroll.min.css">
    <link rel="stylesheet" href="../layui-v2.4.3/layui/css/layui.css">
    <style>
        .mescroll {
            padding-top: 44px;
        }
    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">下拉刷新/上拉加载</h1>
    </header>
    <div id="mescroll" class="mescroll">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">Item 1</a>
            </li>
        </ul>
    </div>
    <!-- <div class="swiper-container">
			<div class="swriper-top">下拉刷新</div>
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					
					<div>
						<p style="line-height: 50px">上拉加载</p>
					</div>
				</div>
			</div>
		</div> -->

    <!-- 导航等组件可以放在container之外 -->
    <script src="../../js/mui.min.js"></script>
    <script src="mescroll-master/dist/mescroll.min.js"></script>
    <script src="../layui-v2.4.3/layui/layui.all.js"></script>
    <script type="text/javascript">
        var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
            //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
            //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
            down: {
                auto: true,
                autoShowLoading: true,
                callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
            },
            up: {
                callback: upCallback, //上拉加载的回调
            }
        });
        function downCallback() {
            setTimeout(function () {
                console.log('downCallback')
                mescroll.endErr();
            }, 1000)
        }
        function upCallback() {
            setTimeout(function () {
                console.log('upCallback')
                mescroll.endErr();
            }, 1000)
        }
    </script>
</body>

</html>